<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">知识点</div>
    <div class="lesson-info">
      <img :src="info.url" alt>
      <p class="name">{{info.name}}</p>
      <p class="desc">{{info.desc && info.desc.length > 45 ? info.desc.substr(0,45)+'...' : info.desc}}</p>
      <!--<div class="order">该课程需订购后观看</div>-->
    </div>
    <div class="knowledge">
      <div class="sidebar">
        <scroll-container ref="scrollContainer" :listenShowNav="false">
          <multi-list
            @scrollTo="scrollTo"
            @scrollFoc="scrollFoc"
            :groupDatas="gradeList"
            :head="head"
          >
            <ul>
              <li
                :data-index="'tar_0_'+index"
                :class="{active: gradeList.focArr[0][index], active_hold: index === holdIndex}"
                v-for="(grade,index) in gradeList.dataArr[0].data"
                :key="index"
              >
                {{grade}}
                <!-- <router-link to="lesson">{{grade}}</router-link> -->
              </li>
            </ul>
          </multi-list>
        </scroll-container>
      </div>
      <zsdlist :groupDatas="groupDatas" @lastAfter="lastAfter" @firstBefore="firstBefore"></zsdlist>
    </div>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import zsdlist from "@/components/tbkt/zsd-list";
import imglist_w312 from "../ImgList_w312";

export default {
  name: "tbkt_hskt",
  components: {
    zsdlist,
    scrollContainer,
    multiList,
    imglist_w312
  },
  data() {
    return {
      groups: [0, 1],
      scrollY: 0,
      backObjName: "hskt_zsd",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      folderCode: this.$route.params.folderCode,
      holdIndex: -1,
      head: {
        right: "1-0"
      },
      info: {
        name: "",
        desc: "",
        url: ""
      },
      groupDatas: {
        dataArr: [
          {
            maxLine: 1,
            dynamic: false,
            title: "",
            data: []
          }
        ],
        focArr: [[]]
      },
      gradeList: {
        dataArr: [
          {
            maxLine: 1,
            dynamic: false,
            data: [],
            focObj: []
          }
        ],
        focArr: [[]]
      }
    };
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
    },
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    scrollFoc(obj) {
      if (obj.group === 0) {
        this.getData();
        this.hs.areaLastFocus[1] = null;
        this.holdIndex = -1;
      }
    },
    firstBefore(){
      // console.log('firstBefore');
      if(this.hs.focArea === 1){
        let oldIndex = this.hs.areaLastFocus[0].objindex
        if(oldIndex > 0){
          this.hs.areaLastFocus[0] = null
          this.hs.areaLastFocus[1] = null
          this.hs.initFocus('0-' + (oldIndex - 1))
          setTimeout(()=>{
            this.hs.initFocus('1-0')
          },20)
        }
      }
    },
    lastAfter(){
      // console.log('lastAfter');
      if(this.hs.focArea === 1){
        let oldIndex = this.hs.areaLastFocus[0].objindex
        if(oldIndex < this.gradeList.dataArr[0].data.length - 1){
          this.hs.areaLastFocus[0] = null
          this.hs.areaLastFocus[1] = null
          this.hs.initFocus('0-' + (oldIndex + 1))
          setTimeout(()=>{
            this.hs.initFocus('1-0')
          },20)
        }
      }
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    initList() {
      let pages = 0;
      let pageItems = 0;
      let url =
        "http://ips-4k.hzdtv.tv/dataquery/folderContents?folderCode=" +
        this.folderCode +
        "&pageItems=1&cImageMode=255,339,JPG&segmentIndex=1&pageIndex=1";
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          pageItems = obj.totalItems;
        },
        0,
        function(msg) {},
        3000
      );
      pages = Math.ceil(pageItems / 5);
      let arr = [];
      let left, right;
      for (let i = 1; i <= pages; i++) {
        left = (i - 1) * 5 + 1;
        right = i * 5 <= pageItems ? i * 5 : pageItems;
        if (left.toString().length === 1) left = "0" + left;
        if (right.toString().length === 1) right = "0" + right;
        arr.push(left + "-" + right);
      }
      this.gradeList.dataArr[0].data = arr;

      url =
        "http://ips-4k.hzdtv.tv/dataquery//folder?folderCode=" +
        this.folderCode;
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          this.info.name = obj.folderName;
          this.info.desc = obj.desc;
          this.info.url = obj.images[0] ? obj.images[0].url : null;
        },
        0,
        function(msg) {},
        3000
      );
    },
    getData() {
      let url =
        "http://ips-4k.hzdtv.tv/dataquery/folderContents?folderCode=" +
        this.folderCode +
        "&pageItems=5&cImageMode=255,339,JPG&fields=assetType&segmentIndex=1&pageIndex=" +
        (this.hs.focObj.objindex + 1);
      this.hs.ajax.post(
        "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
        "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
        obj => {
          obj = JSON.parse(obj);
          // console.log(obj);
          this.groupDatas.dataArr[0].data = obj.contents;
        },
        0,
        function(msg) {},
        3000
      );
    }
  },
  created() {
    this.initList();
  },
  mounted() {
    this.hs.initFocus("0-0");
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      if (group === 1) {
        // this.setBackObj({
        //   backFocArr: [this.hs.areaLastFocus[0].objid, this.hs.focObj.objid]
        // });
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
          this.folderCode +
          "&contentId=" +
          this.groupDatas.dataArr[0].data[objindex].contentId +
          "&contentType=" +
          this.groupDatas.dataArr[0].data[objindex].contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            // console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  this.folderCode +
                  "&contentId=" +
                  this.groupDatas.dataArr[0].data[objindex].contentId +
                  "&contentType=" +
                  this.groupDatas.dataArr[0].data[objindex].contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    // console.log(res);
                    this.bridge.gotoApplication2play(res.playUrl);
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          },
          0,
          3000
        );
      }
    });

    this.hs.addBlurArea([0], (group, objid, objindex) => {
      // console.log("addBlurArea" + group);
      this.holdIndex = objindex;
    });

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      // console.log(JSON.stringify(focArr) + "**************");
      this.hs.initFocus(focArr[0]);
      setTimeout(() => {
        this.hs.initFocus(focArr[1], true);
      }, 200);
    }

    this.bridge.whenKeyBack = () => {
      // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
      if (this.$store.state.appShow) {
        window.history.go(-1);
      } else {
        this.$store.commit("setAppShow", true);
      }
    };
  }
};
</script>

<style scoped lang="less">
.main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .title {
    position: absolute;
    top: 77px;
    right: 121px;
    font-size: 60px;
    color: #e8e8e8;
  }
  .lesson-info {
    flex-shrink: 0;
    align-items: center;
    margin-top: 184px;
    margin-left: 120px;
    display: flex;
    flex-direction: column;
    width: 410px;
    height: 707px;
    background-color: #74c1e5;
    border-radius: 8px;
    overflow: hidden;
    img {
      width: 312px;
      height: 413px;
      margin-top: 61px;
      background-color: #626262;
      border-radius: 8px;
    }
    .name {
      margin-top: 33px;
      width: 300px;
      line-height: 36px;
      font-size: 36px;
      color: #242424;
      margin-top: 23px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    .desc {
      text-indent: 2em;
      margin-top: 23px;
      margin-bottom: 20px;
      width: 300px;
      line-height: 24px;
      font-size: 24px;
      color: #414141;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .order {
      margin-top: 23px;
      text-align: center;
      width: 312px;
      height: 51px;
      line-height: 51px;
      background-color: #3078a9;
      border-radius: 26px;
      font-size: 26px;
      color: #ffff89;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .knowledge {
    display: flex;
    width: 1224px;
    height: 707px;
    margin-top: 184px;
    margin-left: 46px;
    background-color: #74c1e5;
    overflow: hidden;
    .sidebar {
      box-sizing: border-box;
      flex-shrink: 0;
      width: 284px;
      align-items: center;
      display: flex;
      justify-content: center;
      overflow: hidden;
      box-shadow: #384f73 0px 0 43px;
      .content {
        width: 187px;
        height: 642px;
        .multi-container {
          ul {
            display: block;
            margin: 0;
            padding: 0;
            li {
              text-align: center;
              margin-bottom: 48px;
              padding: 0;
              list-style: none;
              width: 187px;
              height: 90px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 36px;
            }
            .active_hold {
              background-color: #09508a;
              border-radius: 8px;
              color: #fbff92;
            }
            .active {
              background-color: #0e60e9;
              border: 2px solid #fff;
              border-radius: 8px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
